<template>
  <section class="content" id="content">
    <lq-form :form="form" :rules="rules" ref="addEmployeeFormRef">
      <template #footer>
        <div style="padding-bottom: 10px;" v-if="form.innerAttrs.disabled==false">
          <el-button type="primary"  @click="handleSubmit">提交</el-button>
        </div>
      </template>
    </lq-form>
  </section>
</template>
<script setup lang="ts">
import LqForm from "@/pages/components/LqForm.vue";

import {
  ref,
  reactive,
  onMounted,
  toValue,
  defineExpose,
  defineEmits,
  getCurrentInstance
} from "vue";
import {ElMessage, FormInstance, FormRules} from "element-plus";


/**
 * --------------全局共享上下文引入--------------------------
 */
const global = getCurrentInstance().appContext.config.globalProperties;



// 表单数据结构
const form = ref({
  innerAttrs: {
    labelPosition: 'right',
    labelWidth: 140,
    disabled: false,
    readonly:false
  },
  model: {
    id:'',
    name: '',
    sex: '',
    nation: '',
    idType: '',
    idCode: '',
    duties: '',
    isFulltime: '',
    serviceLength: '',
    type: '',
    mobilePhone: '',
    officePhone:'',
    dept: '',
    position: '',
    education: '',
    joinTime: '',
    job: '',
  },
  formItems: [
    {type: 'input', label: '姓名: ', prop: 'name', span: 12, maxlength: 30, placeholder: '请输入姓名'},
    {type: 'select', label: '性别: ', prop: 'sex', span: 6, options: [{label: '男', value: '男'},{label: '女', value: '女'}], },
    {type: 'select', label: '民族: ', prop: 'nation', span: 6, options: [{label: '汉族', value: '汉族'},{label: '回族', value: '回族'},{label: '维族', value: '维族'}], },
    {type: 'select', label: '证件类型: ', prop: 'idType', span: 12, options: [{label: '身份证', value: '身份证'},{label: '社保卡', value: '社保卡'}], },
    {type: 'input', label: '身份证号: ', prop: 'idCode', span: 12, placeholder: ''},
    {type: 'input', label: '职务: ', prop: 'duties', span: 12, placeholder: '', },
    {type: 'select', label: '专（兼）职: ', prop: 'isFulltime', span: 6, options: [{label: '专职', value: true},{label: '兼职2', value: false}], },
    {type: 'input', label: '工龄 ', prop: 'serviceLength', span: 6, placeholder: ''},
    {type: 'select', label: '人员类型: ', prop: 'type', span: 12, options: [{label: '特殊人才', value: '特殊人才'},{label: '普通职员', value: '普通职员'}], },
    {type: 'input', label: '移动电话: ', prop: 'mobilePhone', span: 6, placeholder: '', },
    {type: 'input', label: '办公电话: ', prop: 'officePhone', span: 6, placeholder: '', },
    {type: 'input', label: '所属部门: ', prop: 'dept', span: 12, placeholder: '', },
    {type: 'input', label: '岗位: ', prop: 'position', span: 12, placeholder: '', },
    {type: 'select', label: '最高学历: ', prop: 'education', span: 12, options: [{label: '本科', value: '本科'},{label: '硕士', value: '硕士'},{label: '博士', value: '博士'}], },
    {type: 'date', label: '进入单位时间: ', prop: 'joinTime', span: 12,valueFormat:"YYYY-MM-DD" },
    {type: 'textarea', label: '职责: ', prop: 'job', rows: 3, span: 24, placeholder: '', }
  ],
  buttonsAttrs: {
    // align: 'center'
  }
});

// 表单验证规则
const rules = reactive<FormRules>({
  name: [{ required: true, message: '请输入人员姓名', trigger: 'blur'}],
  idCode: [{ required: true, message: '请输入身份证', trigger: 'blur'}],
  mobilePhone: [{ required: true, message: '请输入移动电话', trigger: 'blur'}],
  dept: [{ required: true, message: '请选择部门', trigger: 'blur'}],
  serviceLength: [{ required: true, message: '请输入工龄', trigger: 'blur'},{ type: 'number', message: '工龄必须是数字', trigger: 'blur'}],
  joinTime: [{ required: true, message: '请输入进入单位时间', trigger: 'blur'}],
  duties: [{ required: true, message: '请输入职务', trigger: 'blur'}],
  position: [{ required: true, message: '请输入岗位', trigger: 'blur'}],
});


//向上注册刷新事件
const emit = defineEmits<{
  (e: 'flush', value: Object): void
}>()

// 表单验证规则
const addEmployeeFormRef = ref<FormInstance>();

const handleSubmit = async () => {
  const valid = await addEmployeeFormRef.value?.validateForm();
  if (valid) {
    global.$api.updateOrSaveEntEmployee(Object.assign({}, form.value.model, {}))
        .then(({data}) => {
          if (data.status === 'OK') {
            ElMessage({type: "success", message: "操作成功！", duration: 4000});
            // form.value.innerAttrs.disabled=true;
            emit('flush', {});
          }
        });
  }

}



const handleReset = () => {
  addEmployeeFormRef.value?.resetFields();
  form.value.innerAttrs.readonly=false;
  form.value.model.id='';  //必须置空否则变成修改了

}
const handleViewOrEdit = async (id:string,readyOnly:boolean) => {
 await global.$api.getEntEmployeeById({id:id})
      .then(({data}) => {
        if (data.status === 'OK') {
          form.value.model = data.data;
          form.value.innerAttrs.readonly = readyOnly;
        }
      });

}



//暴漏组件操作接口
defineExpose({
  handleViewOrEdit, //编辑
  handleReset  //重置
})

</script>